/* eslint-disable max-len */
import { Graphics } from '../../../../src/scene/graphics/shared/Graphics';

import type { Container } from '../../../../src/scene/container/Container';
import type { TestScene } from '../../types';

export const scene: TestScene = {
    it: 'render userSpaceOnUse gradients',
    create: async (scene: Container) =>
    {
        const beetle = `
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
                <defs>
                    <linearGradient id="a1" x1="256" x2="256" y1="512" y2="0" gradientUnits="userSpaceOnUse">
                        <stop offset="0" stop-color="#ffbef9" />
                        <stop offset="1" stop-color="#fff1ff" />
                    </linearGradient>
                    <linearGradient id="b1" x1="256" x2="256" y1="407" y2="105" gradientUnits="userSpaceOnUse">
                        <stop offset="0" stop-color="#ff81ff" />
                        <stop offset="1" stop-color="#a93aff" />
                    </linearGradient>
                </defs>
                <circle cx="256" cy="256" r="256" fill="url(&quot;#a1&quot;)" data-original="url(#a1)" />
                <path fill="url(&quot;#b1&quot;)" d="M273.765 193.823h-35.529c-14.694 0-26.647 11.953-26.647 26.647 0 4.597.677 9.082 2.021 13.375 5.968 18.562 23.004 31.036 42.391 31.036s36.423-12.474 42.408-31.097c1.327-4.233 2.004-8.717 2.004-13.314-.001-14.694-11.954-26.647-26.648-26.647zm130.633 109.191-15.162-15.163V256a8.885 8.885 0 0 0-4.216-7.555 8.84 8.84 0 0 0-8.64-.39l-46.992 23.496c-2.447-7.048-5.336-13.852-9.033-20.032l28.442-14.22a8.885 8.885 0 0 0 4.909-7.945V188.62l15.163-15.163c3.47-3.47 3.47-9.09 0-12.56s-9.091-3.47-12.56 0l-17.765 17.765a8.875 8.875 0 0 0-2.602 6.28v38.921l-19.292 9.646c-.399 1.875-.719 3.77-1.291 5.594-8.388 26.092-32.225 43.544-59.357 43.544s-50.961-17.426-59.305-43.362c-.594-1.902-.926-3.842-1.336-5.772l-19.3-9.65v-38.921a8.877 8.877 0 0 0-2.602-6.28l-17.765-17.765a8.878 8.878 0 0 0-12.56 0 8.878 8.878 0 0 0 0 12.56l15.163 15.163v40.734c0 3.366 1.9 6.436 4.909 7.945l28.442 14.22c-3.697 6.181-6.586 12.984-9.033 20.032l-46.992-23.496a8.862 8.862 0 0 0-8.64.39 8.885 8.885 0 0 0-4.216 7.555v31.852l-15.162 15.163a8.878 8.878 0 0 0 0 12.56 8.878 8.878 0 0 0 12.56 0l17.765-17.765a8.879 8.879 0 0 0 2.602-6.28v-21.156l37.497 18.748c-1.131 6.426-1.907 12.968-1.936 19.688l-29.49 9.828a8.872 8.872 0 0 0-6.072 8.422v49.616l-15.162 15.163a8.878 8.878 0 0 0 0 12.56 8.878 8.878 0 0 0 12.56 0l17.765-17.765a8.875 8.875 0 0 0 2.602-6.28V333.46l19.155-6.385C184.316 372.479 216.893 407 256 407s71.684-34.521 78.551-79.925l19.155 6.385v46.893c0 2.359.937 4.615 2.602 6.28l17.765 17.765a8.878 8.878 0 0 0 12.56 0 8.878 8.878 0 0 0 0-12.56l-15.162-15.163v-49.616a8.871 8.871 0 0 0-6.072-8.422l-29.49-9.828c-.028-6.72-.805-13.262-1.936-19.688l37.497-18.748v21.156c0 2.359.937 4.615 2.602 6.28l17.765 17.765c3.47 3.47 9.09 3.47 12.56 0s3.47-9.091.001-12.56zm-166.163-2.602h35.529a8.877 8.877 0 0 1 8.882 8.882 8.877 8.877 0 0 1-8.882 8.882h-35.529c-4.91 0-8.882-3.973-8.882-8.882s3.973-8.882 8.882-8.882zm35.53 88.823h-35.529c-4.91 0-8.882-3.973-8.882-8.882s3.973-8.882 8.882-8.882h35.529c4.91 0 8.882 3.973 8.882 8.882s-3.973 8.882-8.882 8.882zm17.764-35.529H220.47a8.877 8.877 0 0 1-8.882-8.883 8.877 8.877 0 0 1 8.882-8.882h71.059a8.877 8.877 0 0 1 8.882 8.882 8.876 8.876 0 0 1-8.882 8.883zM160.896 137.927a8.873 8.873 0 0 0 6.28 2.602h48.541l19.017 28.525c-1.584 2.113-2.823 4.486-3.745 7.004h50.022c-.922-2.518-2.161-4.891-3.745-7.004l19.017-28.525h48.541a8.877 8.877 0 0 0 6.28-2.602l17.765-17.765a8.88 8.88 0 0 0 0-12.561 8.88 8.88 0 0 0-12.56 0l-15.162 15.163h-49.616a8.882 8.882 0 0 0-7.39 3.956l-21.645 32.467c-2.09-.528-4.242-.894-6.494-.894s-4.403.366-6.494.894l-21.645-32.467a8.886 8.886 0 0 0-7.39-3.956h-49.616l-15.162-15.163a8.88 8.88 0 0 0-12.56 0 8.88 8.88 0 0 0 0 12.561z" data-original="url(#b1)" />
            </svg>
        `;

        const svg = new Graphics().svg(beetle);

        svg.setSize(128, 128);

        scene.addChild(svg);
    },
};
